<template>
  <div class="bi-page" :class="{'is-fixed-header': fixedHeader, 'has-scroll': scrollTop, 'has-background': background}">
    <div class="bi-page__header">
      <div class="bi-page__header-left">
        <router-link
          v-if="backUrl"
          :to="backUrl"
          class="bi-page__back"
        ></router-link>
        <div class="bi-page__title" v-if="innerTitle || $slots.title">
          <slot name="title">
            {{ innerTitle }}
          </slot>
        </div>
        <div class="bi-page__views" v-if="tabs && tabs.length">
          <router-link
            class="bi-page__views-item"
            v-for="item in tabs"
            :key="item.id"
            :to="handleRenderTabItemPath(item)"
          >{{ item.title }}</router-link>
        </div>
        <div class="bi-page__prepend" v-if="$slots.prepend">
          <slot name="prepend"></slot>
        </div>
      </div>
      <div class="bi-page__header-right">
        <slot name="addon"></slot>
      </div>
    </div>
    <div class="bi-page__container" ref="container" @scroll="handleContainerScroll">
      <slot></slot>
    </div>
  </div>
</template>
<script>
function resolvePathParams (path, params) {
  if (!path || !params) {
    return path
  }
  /* eslint-disable */
  return path.replace(/\:(\w+)/g, (m1, m2) => {
    if (params[m2]) {
      return params[m2]
    } else {
      return m1
    }
  })
  /* eslint-enable */
}

export default {
  name: 'BiPage',
  props: {
    title: {
      type: String
    },
    backUrl: {
      type: String
    },
    fixedHeader: {
      type: Boolean,
      default: true
    },
    background: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      scrollTop: 0
    }
  },
  computed: {
    innerTitle () {
      let title
      if (this.title) {
        title = this.title
      } else if (this.tabs && this.tabs.length && this.tabsRoute) {
        title = this.tabsRoute.title
      } else if (this.route) {
        title = this.route.title
      }
      return title
    },
    route () {
      return this.$platform.getRoute(this.$route.meta.$id)
    },
    tabsRoute () {
      return this.$platform.getClosestRoutes(this.$route.meta.$id).find(route => {
        if (!route.children || !route.children.length) {
          return
        }
        return route.children.some(child => child.tabs)
      })
    },
    tabs () {
      if (!this.tabsRoute || !this.tabsRoute.children) {
        return []
      }
      return this.tabsRoute.children.map((v) => {
        return this.$platform.getMenuItemByRouteId(v.meta.$id)
      }).filter(v => !!v)
    }
  },
  mounted () {
    this.$refs.container.addEventListener('scroll', this.handleContainerScroll)
  },
  methods: {
    handleRenderTabItemPath (item) {
      return resolvePathParams(item.fullPath, this.$route.params)
    },
    handleContainerScroll () {
      clearTimeout(this._timer)
      this._timer = setTimeout(() => {
        this.syncScrollTop()
      })
    },
    syncScrollTop () {
      if (!this.$refs.container) {
        return
      }
      this.scrollTop = this.$refs.container.scrollTop
    }
  },
  beforeDestroy () {
    clearTimeout(this._timer)
  }
}
</script>
<style lang="less">
.bi-page{
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  &.has-background {
    background-color: #f7f7f7;
  }
  &.is-fixed-header {
    > .bi-page__header{
      position: absolute;
      left: 0;
      right: 12px;
      top: 0;
      padding: 16px 8px 16px 20px;
      z-index: 3;
    }
    > .bi-page__container{
      padding: 64px 8px 0 20px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    &:not(.has-background){
      > .bi-page__header{
        background-image: radial-gradient(transparent 1px,#ffffff 1px);
        background-size: 4px 4px;
        backdrop-filter: saturate(50%) blur(4px);
      }
    }
    &.has-scroll{
      > .bi-page__header{
        &:after {
          content: '';
          position: absolute;
          left: 20px;
          right: 8px;
          bottom: 0;
          border-bottom: 1px solid #e8e8e8;
        }
      }
    }
  }
  &:not(.is-fixed-header) {
    padding: 16px 20px 0;
  }
}
.bi-page__header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  padding-bottom: 16px;
}
.bi-page__header-left{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.bi-page__title{
  font-size: 18px;
}
.bi-page__back{
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px 0px rgba(169,169,169,0.5000);
  margin-right: 12px;
  position: relative;
  background: url('./icons/back-line.svg') no-repeat 50% 50%;
  background-size: 85%;
  transition: all .25s;
  cursor: pointer;
  &:hover {
    background-color: #f3f3f3;
  }
}
.bi-page__container {
  flex: 1;
  min-height: 0;
  position: relative;
}
.bi-page__views{
  display: flex;
  flex-direction: row;
  position: relative;
  padding-left: 12px;
  margin-left: 12px;
  &:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 24px;
    transform: translateY(-50%);
    background-color: #eee;
  }
}
.bi-page__views-item{
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  cursor: pointer;
  border-radius: 4px;
  color: inherit;
  &:not(:last-child) {
    margin-right: 6px;
  }
  &.router-link-active {
    background-color: #DFEBFF;
    color: #3385FF;
    font-weight: bold;
  }
}
</style>
